<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-06-20 09:09:43
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-08-08 17:25:21
 * @FilePath: \honglian-video-phone-center\src\components\Common\MenuList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 有子节点渲染这个 -->
  <el-sub-menu :index="props.menu.path" v-if="props.menu?.children" :expand-open-icon="CaretTop"
    :expand-close-icon="CaretBottom">
    <template #title>
      <el-icon>
        <!-- <component :is="props.menu?.icon"></component> -->
        <SvgIcon :icon-class="props.menu?.icon" color="#fff" size="20px"></SvgIcon>
      </el-icon>
      <span>{{ props.menu?.title }}</span>
    </template>
    <!-- 递归调用本身，该组件在index.ts中全局注册了 -->
    <MenuListVue v-for="item in props.menu.children" :menu="item" />
  </el-sub-menu>
  <!-- 没有子节点渲染这个 -->
  <el-menu-item v-else :index="props.menu?.path">
    <!-- <el-icon>
      <component :is="props.menu?.icon"></component>
    </el-icon> -->
    <span slot="title">{{ props.menu?.title }}</span>
  </el-menu-item>
</template>

<script lang="ts" setup>
import { CaretTop,CaretBottom } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { PiniaStore } from '../../store'
const store = PiniaStore()
interface PropsType {
  menu: any
  // isCollapse: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
  menu: {}
})
</script>

<style lang="scss" scoped></style>
